<template>
	<view class="cons_con">
		<view class="conscon1">
			<u-sticky>
				<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
					@click=" tabClick"></u-tabs>
			</u-sticky>
		</view>

		<view class="add_list">
			<image class="add_li_img" :src="po48" mode="" v-if="list3 !=''"></image>
			<view class="group_9" v-else>
				<u-empty text="此楼层无公共设施"
					icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
			</view>
			<view class="add_li_right" v-for="(item,index) in list3" :key="index" :class="{ resize: index === gjindex }"
				@click="loucheng(item,index)">
				{{item.name}}F
			</view>
		</view>
		<view class="box_1">
			<view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">厕位剩余数量</text>
				</view>
			</view>
			<view class="list_1">
				<view class="list-items_1-0" v-for="(item,index) in communallist" :key='index'>
					<text lines="1" class="text_4-1">{{item.name}}</text>
					<view class="list-items_1-1">
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po68" mode=""></image>
							<text lines="1" class="text_3-0">男：</text><text style="color: #38AC78;">{{item.data.man}}</text>
						</view>
						<text lines="1" class="text_3-1"></text>
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po67" mode=""></image>
							<text lines="1" class="text_4-0">女：</text><text style="color: #E16F6F;">{{item.data.nv}}</text>
						</view>
						<text lines="1" class="text_3-2"></text>
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po64" mode=""></image>
							<text lines="1" class="text_4-0">残卫：</text><text style="color: #CE8038;">{{item.data.other}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <text lines="1" class="text_5">更多记录</text> -->
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				po66: this.$https.assetsPath + 'po66.png',
				po50: this.$https.assetsPath + 'po50.png',
				po68: this.$https.assetsPath + 'maleq.png',
				po67: this.$https.assetsPath + 'femaleq.png',
				po64: this.$https.assetsPath + 'disabilityq.png',
				po48: '',
				currentTab: 0,
				gjindex: 0,
				list1: [],
				list2: [],
				currentTab: 0,
				current_Tab: 0,
				gjindex: 0,
				list3: [],
				cate_id: '',
				floorindex: '',
				venue_id: '',
				splist: [],
				communallist: []
			};
		},
		onLoad(options) {
			this.getSeCondVenue()
			this.communal()
		},
		onShow() {

		},
		methods: {
			// 获取分类商品
			async getSeCondVenue() {
				let data = {}
				let result = await subscribe.getSeCondVenue(data)
				if (result.code == 1) {
					this.list1 = result.data
					this.list3 = result.data[0].floor
					this.po48 = result.data[0].floor[0].court_img
					this.venue_id = result.data[0].id
					this.floorindex = result.data[0].floor[0].name
				}
			},
			// 获取店铺商品
			async communal() {
				let data = {
					project_id: '',
					venue_id: '',
					type: '',
					output: 'json'
				}
				let result = await subscribe.communal(data)
				if (result.code == 1) {
					this.communallist = result.data
				}
			},
			loucheng(item, index) {
				// this.current_Tab = 0
				this.gjindex = index
				this.po48 = item.court_img
				this.floorindex = item.name
				// this.communal()
			},
			tabClick(item) {
				this.po48 = ''
				this.list2 = []
				this.splist = []
				this.gjindex = 0
				this.current_Tab = 0
				this.currentTab = item.index;
				this.list3 = item.floor
				this.po48 = item.floor[0].court_img
				this.venue_id = item.id
				this.floorindex = item.floor[0].name
				this.communal()
			},
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
			}

			.add_li_right {
				position: absolute;
				z-index: 9;
				right: 20rpx;
				width: 62rpx;
				height: 62rpx;
				border: 1rpx #b1b1b1 solid;
				top: 180rpx;
				background-color: #fff;
				line-height: 62rpx;
				text-align: center;
				margin-top: 62rpx;
				font-size: 26rpx;
			}

			.resize {
				color: #4BA677;
			}

			/* 根据索引值设置不同的垂直偏移 */
			.add_li_right:nth-child(1) {
				top: 30rpx;
			}

			.add_li_right:nth-child(2) {
				top: 60rpx;
				/* 根据需求调整偏移量 */
			}

			.add_li_right:nth-child(3) {
				top: 120rpx;
				/* 根据需求调整偏移量 */
			}
		}

		.conscon1 {
			padding: 0 0 20rpx 0;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.box_1 {
			// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
			background-color: rgba(255, 255, 255, 1.0);
			display: flex;
			flex-direction: column;
			padding: 29rpx 12rpx 18rpx 20rpx;
		}

		.box_4 {
			background-color: rgba(255, 255, 255, 1.0);
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			padding: 0 0 20rpx 0;
		}

		.image-text_1 {
			width: 177rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.section_1 {
			background-color: rgba(75, 166, 119, 1.0);
			border-radius: 12rpx;
			width: 6rpx;
			height: 24rpx;
			display: flex;
			flex-direction: column;
			margin: 8rpx 0 8rpx 0;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: #333333;
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.list_1 {
			// height: 960rpx;
			margin-right: 8rpx;
			display: flex;
			flex-direction: column;
		}

		.list-items_1-0 {
			width: 710rpx;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx 0 30rpx;
			height: 120rpx;
			background: #F4F9F9;
			border-radius: 20rpx;
			align-items: center;
		}

		.list-items_1-1 {
			width: 86%;
			background-color: #fff;
			height: 100rpx;
			background-size: 100% 100%;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			// background: #F4F9F9;
			border-radius: 10rpx;
			align-items: center;
			padding: 0 20rpx;
		}

		.list-items_1-6 {
			flex-direction: row;
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.text_3-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin-left: 10rpx;
		}

		.text_3-1 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_3-2 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_4-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin: 0 0 0 20rpx;
			margin-left: 10rpx;
		}

		.text_4-1 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			// margin: 0 0 0 20rpx;
		}


		.text_5 {
			overflow-wrap: break-word;
			color: rgba(114, 158, 135, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 24rpx;

		}

	}
</style>